<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <title>回顾Object.defineproperty</title>
    <!--引入Vue-->
    <!--创建Vue对象-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <!--准备好一个容器-->

    <div id="root">
        <!--下面对应的就是view-->
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>

    </div>

    <script type="text/javascript">
        let number = 18

        //给对象添加属性
        let person = {
            name: '张三',
            sex: '男',
            // age:18
        }

        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable:true, //控制属性是否可以被枚举，默认为false
            // writable:true, //控制属性是否都可以被修改，默认为false
            // configurable:true //控制属性是否可以被删除，默认为false


            //当有人读取age属性时，get函数就会被调用，且返回值就是age的值
             get() {
                console.log("有人读取了age属性")
                return number

            },
            
            //当有人修改age属性时，set函数就会被调用，且会收到修改的具体值
            set(value) {
                console.log("有人修改了age属性且值为：", value)

                number = value
            }

        })

        //console.log(Object.keys(person))
        // console.log(person)

        console.log(person)

    </script>



</body>


</html>